<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>情绪图</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script type="text/javascript"
            src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>
</head>

<body>
<div id="main" style="width:600px;height:400px"></div>
<script>
    var _current = new Date();
    var today = _current.getFullYear() + "-" + (_current.getMonth() + 1) + "-" + _current.getDate();
    var base = +new Date(_current.getFullYear(), _current.getMonth(), _current.getDate(), 9, 29, 0);
    var oneMinute = 60 * 1000 * 1;
    var date = [];
    var openValue = Math.random();
    var data = [];
    var maxData = [];
    var highData = [];
    var lowData = [];
    var minData = [];
    var _index = 100;//当前开始数据为空的下标
    const requestUrl = "/api/stock/chart/getStockEmotionData";
    var emotionData = [];
    var dateStr = today;


    function getUrlParam(code) {
        const url = new URL(window.location.href);
        const params = new URLSearchParams(url.search);
        return params.get(code);
    }

    function getRequestUrl() {
        return requestUrl + "?date=" + getUrlParam("date");
    }

    function loadChart() {
        var url = getRequestUrl();
        $.get(url, function (rawData) {
            emotionData = rawData;
            for (var i = 0; i < rawData.length; i++) {
                var object = rawData[i];
                date.push(object.time);
                data.push(object.value);
                maxData.push(object.max);
                highData.push(object.high);
                lowData.push(object.low);
                minData.push(object.min);
            }
            console.log(date);
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        });

    }


     option = {
        tooltip: {
            trigger: 'axis',
            triggerOn: 'mousemove',
            confine: true,
            position: function (pt) {
                return [pt[0], '10%'];
            },
            formatter: function (param) { //value当前值，index当前索引
                console.log(param[2]);
                if (param[0].data) {
                    return param[0].axisValue
                        + '<br/>热点值：' + param[0].data.toFixed(2)
                        + '%<br/>高位数：' + param[1].data.toFixed(2)
                        + '%<br/>参考值：' + param[2].data.toFixed(2)
                        + '%<br/>低位数：' + param[3].data.toFixed(2)
                        + '%<br/>冰点值：' + param[4].data.toFixed(2) + '%';
                }
            }
        },
        title: {
            left: 'center',
            text: '股票情绪图-' + getUrlParam("date"),
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: [
            {
                show: true,
                type: 'category',
                boundaryGap: false,
                data: date,
                position: 'bottom',
                axisLabel: {
                    interval: 60,
                    textStyle: {
                        color: '#333'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        type: 'solid',
                        color: '#ccc',
                        width: 1
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                boundaryGap: false,
                axisLine: {// 坐标轴线
                    lineStyle: {
                        type: 'solid',
                        color: '#ededed',
                        width: 1
                    }
                },

                axisLabel: {// 坐标轴文本标签，详见axis.axisLabel
                    textStyle: {
                        color: '#000'
                    }
                }
            },
            {
                show: false
            }
        ],
        series: [

            {
                name: '热点值',
                type: 'line',
                smooth: true,
                symbol: 'none',
                sampling: 'average',
                yAxisIndex: 0,
                itemStyle: {
                    color: '#DC143C',
                    width: 1
                },

                data: maxData

            },
            {
                name: '高位值',
                type: 'line',
                smooth: true,
                symbol: 'none',
                sampling: 'average',
                yAxisIndex: 0,
                itemStyle: {
                    color: '#FF4500',
                    width: 1
                },

                data: highData

            },
            {
                name: '参考值',
                type: 'line',
                smooth: true,
                symbol: 'none',
                sampling: 'average',
                yAxisIndex: 0,
                itemStyle: {
                    color: '#00BFFF',
                    width: 1
                },
                data: data

            },
            {
                name: '低位值',
                type: 'line',
                smooth: true,
                symbol: 'none',
                sampling: 'average',
                yAxisIndex: 0,
                itemStyle: {
                    color: '#00FF00',
                    width: 1
                },

                data: lowData
            },
            {
                name: '冰点值',
                type: 'line',
                smooth: true,
                symbol: 'none',
                sampling: 'average',
                yAxisIndex: 0,
                itemStyle: {
                    color: '#006400',
                    width: 1
                },

                data: minData
            }
        ]
    };

    loadChart();
    //每隔1秒获取最新数据
    var _timer = window.setInterval(function () {
        loadChart();
    }, 30000);
</script>
</body>

</html>
